<template>

  <el-container>
    <el-header>
      <div class="header-content">
        <img  style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
        <div>
          <img src="@/img.png" alt="Logo-text" style="height: 45px;margin-top: 30px" class="header-logotext">
          <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
        </div>
      </div>
    </el-header>

    <el-main>
      <div style=" padding:50px 20px 20px 20px;background-color:white " class="login-container">
        <p class="welcome-text">&nbsp;欢迎登录</p>
        <el-form :model="loginForm" :rules="rules" ref="userForm" label-width="80px" class="loginform">
          <el-input class="username" v-model="loginForm.phone"  style="width: 300px; margin-left: 20px" placeholder="请输入手机号"></el-input>


          <el-input class="password" type="password" v-model="loginForm.passWord" style="width: 300px;margin-left: 20px;margin-top: 30px" placeholder="请输入密码"></el-input>

          <el-radio v-model="radio" label="1" style="margin-left: 20px; margin-top: 60px">我同意xx协议</el-radio>

          <el-form-item>
            <el-button type="primary" style="width:300px;margin-left: -60px;margin-top: 10px" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
          <div>

            <el-link style="margin-left: 20px">忘记密码</el-link>
            <el-link style="margin-left: 180px;color: cornflowerblue" @click="ToRegister()">注册账号</el-link>
          </div>
        </el-form>
      </div>
    </el-main>
    <el-footer>
      <div class="footer-text">
        <p>©2024 XXXX公司所有｜XX网安备00000000000000｜XICP备2024000000号-0</p>
      </div>
    </el-footer>
  </el-container>

</template>
<script setup>
import {useStore} from "vuex"
import {reactive,ref} from "vue";
import *as loginAPI from "../api/loginAPI";
import router from "@/router";


const loginForm=reactive({phone:"",password:""})
const userForm=ref()

const  rules=reactive({
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      })
const radio=ref('0')

const store=useStore()
const submitForm=()=> {
      userForm.value.validate((valid) => {
        if (valid) {
         // this.tableData.push(formData);
          //console.log(this.tableData);
          // 这里可以添加登录逻辑，比如发送请求到后端验证用户名和密码
          loginAPI.loginAPI(loginForm).then((res)=>{
            if(res.data.code==2000)
            {
              const user=res.data.data;
              store.commit("saveUsernameAndId",user)
              store.commit("saveAll",user)
              console.log(res.data)
              console.log("登录成功");
              console.log(store.getters.getId)
              console.log(store.getters.getIdentity)
              if(store.getters.getIdentity==0)
              {
                router.push("/home")
              }
              if(store.getters.getIdentity==1)
              {
                router.push("/announcement-management")
              }
              if(store.getters.getIdentity==2)
              {
                router.push("/goods-management")
              }

            }
          })
          // console.log('提交表单');
          // 示例：模拟登录成功后的跳转
          // 实际项目中可能会使用路由跳转到首页等操作
        } else {
          console.log('表单验证失败！');
          return false;
        }
      });
    }
    const ToRegister=()=>{
  router.push('register');
    }
</script>
<style scoped>
.el-container {
  height: 100vh; /* 让容器高度充满整个视口 */
  display: flex;
  flex-direction: column; /* 改变主轴方向为垂直 */
}

.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0 20px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  display: flex; /* 使main支持Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 20px; /* 添加内边距 */
  background: url('../shouye.jpg');
  background-repeat: no-repeat;
  background-size:2000px 780px;
}
.header-logo {
  float: left; /* 或使用display: inline-block; 并设置适当的margin-right来与其他元素保持间距 */
  width: 100px; /* 根据实际需要调整图片宽度 */
  height: auto; /* 保持图片的宽高比 */
  margin-right: 10px; /* 可选，根据需要调整与旁边文本的间距 */
}
.header-content {
  display: flex;
  align-items: center;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 60%; /* 可根据实际情况调整，确保内容不会溢出 */
}

.footer-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  width: 100%;
  padding-left: 5%; /* 距离左侧10% */
}
.login-container {
  /*居中*/
  width: 390px;
  height: 400px;
  margin: -100px 130px 0px 1050px;
  border: 1px solid #DCDFE6; /* 添加灰色边框，宽度为1px */
  border-radius: 10px; /* 为盒子添加圆角效果 */
  padding: 20px 20px 20px 20px; /* 为盒子内部添加内边距 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.8)
}
.welcome-text {
  margin: -20px 0px 20px 10px;
  color: #333; /* 文本颜色 */
  margin-bottom: 35px; /* 与表单之间的间距 */
  font-size: 30px; /* 字体大小 */
  font-weight: bold;
}
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.logo-text {

}

</style>